<template>
  <div class="style_config">
    <el-row class="style_fig">
      <affix class="basicSet margin-b-20" label="基本设置" ref="mainStep1">
        <baseConfig ref="baseConfig"></baseConfig>
      </affix>
      <affix class="set-manually margin-b-20" label="机器人设置" ref="mainStep2">
        <robotConfig ref="robotConfig"></robotConfig>
      </affix>
      <affix class="set-manually margin-b-20" label="转人工设置" ref="mainStep3">
        <setManually ref="setManually"></setManually>
      </affix>
      <!--<affix class="sdk-form margin-b-20" label="网页/wap/H5/访客端窗口设置" ref="mainStep4">-->
        <!--<webimWindowConfig ref="webimWindowConfig" :advList="advList"></webimWindowConfig>-->
      <!--</affix>-->
      <!--<affix class="sdk-form margin-b-20" label="网页/wap/H5/访客端其他设置" ref="mainStep5">-->
        <!--<webimConfig ref="webimConfig" @advContent="advContent"></webimConfig>-->
      <!--</affix>-->
      <!--<affix class="sdk-form margin-b-20" label="SDK推送设置" ref="mainStep5">-->
        <!--<sdkConfig ref="sdkConfig"></sdkConfig>-->
      <!--</affix>-->
      <div style="margin-top: 20px;text-align: center">
        <el-button type="primary" class="primary_btn fr" @click="onSubmit">保存设置</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>
  import baseConfig from '@/components/business-modules/merchantConfig/webOnlineServe/base/baseConfig'
  import robotConfig from '@/components/business-modules/merchantConfig/webOnlineServe/base/robotConfig'
  // import sdkConfig from '@/components/business-modules/merchantConfig/webOnlineServe/base/sdkConfig'
  // import webimConfig from '@/components/business-modules/merchantConfig/webOnlineServe/base/webimConfig'
  import setManually from '@/components/business-modules/merchantConfig/webOnlineServe/base/setManually'
  // import webimWindowConfig from '@/components/business-modules/merchantConfig/webOnlineServe/base/webimWindowConfig'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import bus from '@/store/eventBus'
  import Affix from '@/components/ui-modules/affix/Affix'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'styleConfig',
    data () {
      return {
        advList: [],
        type: 'add',
        currObj: {}
      }
    },
    mounted () {
    },
    props: {
      basicData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      scheduleEnable: Boolean
    },
    watch: {
      // 监测传过来的渲染信息
      basicData: {
        handler: function (val) {
          console.log(val)
          if (val._id) { // 如果有值说明是新增，如果没有值说明是修改
            this.type = 'edit'
            this.currObj = val
            this.$nextTick(() => {
              this.$refs.baseConfig.open(val, false) // 基础设置
              this.$refs.setManually.open(val, false) // 转人工设置
              // this.$refs.webimWindowConfig.open(val, false) // 访客端窗口设置
              // this.$refs.webimConfig.open(val, false) // 网页/wap/H5/访客端其他设置
              // this.$refs.sdkConfig.open(val, false) // sdk设置
              this.$refs.robotConfig.open(val, false)
            })
          } else {
            this.type = 'add'
            this.$nextTick(() => {
              this.$refs.baseConfig.open({}, true)
              // this.$refs.webimWindowConfig.open(val, true)
              this.$refs.setManually.open(val, true)
              // this.$refs.webimConfig.open(val, true)
              // this.$refs.sdkConfig.open(val, true) // sdk设置
              this.$refs.robotConfig.open(val, true)
            })
          }
        },
        immediate: true,
        deep: true
      },
      changeWindow (cur) {
        if (this.cssStyle.advConfig) {
          this.cssStyle.advConfig.windowType = this.changeWindow || 'pure'
        }
        this.$emit('changeWin', {changeWindow: this.changeWindow})
      }
    },
    computed: {
    },
    components: {
      baseConfig,
      robotConfig,
      setManually,
      affix,
      bus,
      Affix
    },
    methods: {
      advContent (obj) {
        this.advList = obj.advContent
      },
      onSubmit () {
        let _webImForm = {
          advConfig: {
            advContent: [],
            advScrollTime: 3,
            webImForm: '',
            advScroll: 'scrollX'
          }
        }
        _webImForm.advConfig.advType = '1'
        let setRobot = {...this.$refs.robotConfig.setRobot}
        // const sdkForm = { // sdk设置
        //   androidpushsdk: false,
        //   androidSyncAddress: '',
        //   isIospush: true,
        //   apnCert: { // 新增 ios apn 推送
        //     appName: '', // app名称
        //     bundleId: '',
        //     filePath: '', // apn证书文件，上传证书时，填写上传文件接口返回的filepath信息
        //     fileName: '', // apn证书文件，上传证书时，填写上传文件接口返回的fileName信息
        //     production: true, // apn证书文件，上传证书时，指定是正式环境还是测试环境
        //     passwd: ''  // apn证书解密密码
        //   },
        //   iosSyncAddress: ''
        // }
        // const cssStyleForm = { // 转人工设置
        //   btnIcon: 'icon-webchat1', // 网站设置的按钮icon
        //   chatButtonSideMargin: '18',   //  在线咨询按钮侧边距
        //   chatButtonBottomMargin: '18',
        //   chatButtonLocation: 'bottom-right',
        //   chatButtonMobileLocation: 'circle-right', // 移动按钮位置
        //   chatboxMobileIconType: 1,     //  在线咨询移动端按钮默认图标样式
        //   styleColor: '#19CAA6', // 对话框皮肤
        //   chatButtonMobileSideMargin: '18', // 移动侧边距
        //   chatButtonMobileBottomMargin: '18', // 移动底边距
        //   chatboxIconType: 1,           //  在线咨询按钮默认图标样式
        //   onlineText: '咨询客服', // 网站按钮文案
        //   onlineMobileText: '' // 移动端按钮文案
        // }
        const setManually = { // 转人工设置
          ...this.$refs.setManually.setManually
        }
        let data = Object.assign(setRobot, this.$refs.baseConfig.newForm, setManually, _webImForm)
        data.platform = 'web'
        if (this.type !== 'add') {
          data._id = this.currObj._id
        }
        this.$emit('saveConfig', data)
      },
      // 初始化样式
      inti (val) {
        this.cssStyle = deepClone(this.intiCssStyle)
        if (JSON.stringify(val) === '{}') {
          this.showBack = 0
          this.btnIcon = this.icons[0]
        } else {
          this.showAdvEdit = false
          if (!val.cssStyle.advConfig) {
            this.cssStyle.advConfig = deepClone(this.intiCssStyle.advConfig)
          }
          for (let i in this.cssStyle) {
            if (i === 'advConfig' && val.cssStyle[i] === undefined && val[i] === undefined || val[i] === '') {
              continue
            }
            this.cssStyle[i] = val.cssStyle[i] === undefined ? val[i] || '' : val.cssStyle[i]
          }
          if (!val.chatboxLocationY) {
            this.cssStyle.chatboxLocationY = this.intiCssStyle.chatboxLocationY
          }
          if (!val.chatboxSideMarginY) {
            this.cssStyle.chatboxSideMarginY = this.intiCssStyle.chatboxSideMarginY
          }
          if (!val.chatboxWidth) {
            this.cssStyle.chatboxWidth = this.intiCssStyle.chatboxWidth
          }
          if (!val.chatboxHeight) {
            this.cssStyle.chatboxHeight = this.intiCssStyle.chatboxHeight
          }
          if (!val.chatButtonMobileLocation) {
            this.cssStyle.chatButtonMobileLocation = this.intiCssStyle.chatButtonMobileLocation
          }
          if (!val.chatButtonMobileSideMargin) {
            this.cssStyle.chatButtonMobileSideMargin = this.intiCssStyle.chatButtonMobileSideMargin
          }
          if (!val.chatboxMobileIconType) {
            this.cssStyle.chatboxMobileIconType = this.intiCssStyle.chatboxMobileIconType
          }
          if (!val.chatButtonMobileBottomMargin) {
            this.cssStyle.chatButtonMobileBottomMargin = this.intiCssStyle.chatButtonMobileBottomMargin
          }
          if (val.onlineMobileText === undefined) {
            this.cssStyle.onlineMobileText = this.intiCssStyle.onlineMobileText
          }
          if (!val.chatMarginTop) {
            this.cssStyle.chatMarginTop = this.intiCssStyle.chatMarginTop
          }
          this.cssStyle.advConfig.windowType = this.changeWindow
          this.cssStyle.styleColor = '#' + this.cssStyle.styleColor
          this.cssStyle.showAgentName = val.showAgentName
          this.cssStyle.welcome = val.welcome
          this.cssStyle.showCloseButton = val.showCloseButton
          if (val.showCloseButton === undefined) {
            this.cssStyle.showCloseButton = true
          }
          // 提交的时候判断logo是否变化，不变不传
          this.cssStyle.companyLogoTest = this.cssStyle.companyLogo
          this.btnIcon = this.icons[val.cssStyle.chatboxIconType - 1]
          this.showBack = this.colors.indexOf(this.cssStyle.styleColor) < 0 ? -1 : this.colors.indexOf(this.cssStyle.styleColor)
        }
      },
      // 初始化基本设置信息
      basicSetInti (val) {
        this.form = deepClone(this.intiForm)
        this.todoRandom = Math.random()
        this.form = deepClone(this.intiForm)
        if (JSON.stringify(val) === '{}') {
          this.changeWindow = 'pure'
        } else {
          for (let i in this.form) {
            this.form[i] = val[i] === undefined ? this.intiForm[i] : val[i]
          }
          if (!val.convertManualAfterMsgSwitch) {
            this.form.convertManualAfterMsgSwitch = this.form.convertManualAfterMsgSwitch
          }
          if (!val.convertManualAfterMsg) {
            this.form.convertManualAfterMsg = this.form.convertManualAfterMsg
          }
          if (val.advConfig) {
            this.changeWindow = val.advConfig.windowType || 'pure'
          } else {
            this.changeWindow = 'pure'
          }
          if (val.cyclic_welcome_config) {
            this.form.cyclic_welcome_config = deepClone(val.cyclic_welcome_config)
          } else {
            this.form.cyclic_welcome = false
            this.form.cyclic_welcome_config = deepClone(this.intiForm.cyclic_welcome_config)
          }
          // 兼容老数据 对showTransferBtn（转人工按钮是否显示）初始化
          if (typeof this.form.showTransferBtn === undefined) {
            this.$set(this.form, 'showTransferBtn', true)
          }
          // 兼容老数据 openTriggerWord（是否开启触发词命中转人工）初始化
          if (typeof this.form.openTriggerWord === undefined) {
            this.$set(this.form, 'openTriggerWord', false)
          }
          // 兼容老数据 convert_words（转人工触发词）初始化
          if (typeof this.form.convert_words === undefined) {
            this.$set(this.form, 'convert_words', '')
          }
          //  兼容老数据 isOpenWeight（是否启用多技能组智能分流）初始化
          if (!this.form.isOpenWeight) {
            this.$set(this.form, 'isOpenWeight', false)
          }
          //  兼容老数据 ToPeerWeight（是否启用多技能组智能分流）初始化
          if (typeof this.form.ToPeerWeight === undefined) {
            this.$set(this.form, 'ToPeerWeight', [])
          }
          if (this.form.ToPeer.length) {
            this.form.ToPeer.forEach((item) => {
              if (item.status === 'enable') {
                this.$set(item, 'checked', true)
              } else {
                this.$set(item, 'checked', false)
              }
            })
          }
          this.form._id = val._id === undefined ? '' : val._id
          this.form.accessId = val.accessId === undefined ? '' : val.accessId
        }
      }
    },
    // 获取机器人和技能组列表
    beforeMount () {
    },
    beforeDestroy () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .style_config
    margin 20px
    .margin-l-10
      margin-left 10px
    .margin-b-20
      margin-bottom 20px
    .width-440
      width 440px
  .style_fig
    padding-bottom 40px
    .box
      height 500px
      border 1px solid $c-border2
      position relative
      overflow hidden
      .kf
        position absolute
        color $cf-white
      .bottom_btn
        height 36px
        line-height 36px
        bottom 0
        padding 0 10px
        border-radius 4px 4px 0 0
        :nth-child(2)
          margin-left 6px
      .side_btn
        width 27px
        bottom 18px
        padding 10px 6px
        .iconfont
          margin-left 4px
        :nth-child(2)
          display inline-block
          width 12px
          padding 0 6px
          margin-top 6px
      .circle_btn
        background none
        .iconfont
          display block
          width 28px
          height 28px
          color $cf-white
          text-align center
          line-height 28px
          border-radius 50%
  .grid-content
    margin-left 20px
</style>

